<template>
  <div>
	 <!-- <div class="main-top">
	  	<div class="main-tiem">
	  		<div class="item-div">个性推荐</div>
	  		<div class="item-div">歌单</div>
	  		<div class="item-div">排行榜</div>
	  		<div class="item-div">歌手</div>
	  		<div class="item-div">最新音乐</div>
	  		<div class="item-bott"></div>
	  	</div>
	  </div> -->
	 <Tabs value="0" @on-click="click">
	        <TabPane label="个性推荐" name="0">
				<wyy-content v-if="tabobj[0]"></wyy-content>
			</TabPane>
	        <TabPane label="歌单" name="1">
				<wholesongsheet v-if="tabobj[1]"></wholesongsheet>
			</TabPane>
	        <TabPane label="排行榜" name="2">
				<rankinglist v-if="tabobj[2]"></rankinglist>
			</TabPane>
			<TabPane label="歌手" name="3">
				<singer v-if="tabobj[3]"></singer>
			</TabPane>
			<TabPane label="最新音乐" name="4">
				<latestsongs v-if="tabobj[4]"></latestsongs>
			</TabPane>
	 </Tabs>
  </div>
</template>
<script>
	
import latestsongs from '@/components/latestsongs/latestsongs.vue'
import singer from '@/components/singer/singer.vue'
import rankinglist from '@/components/rankinglist/rankinglist.vue'
import wholesongsheet from '@/components/wholesongsheet/wholesongsheet.vue'
import wyyContent from '@/components/home/wyyContent.vue'
export default{
  data () {
    return {
		tabobj:{
			0: true,
			1: false,
			2: false,
			3: false,
			4: false
		}
    }
  },
  components: {
	wyyContent,wholesongsheet,rankinglist,singer,latestsongs
  },
  methods: {
	click(data){
		this.tabobj[data] = true;
		console.log(data)
	}
  }
}
</script>

<style scoped="scoped">
	>>> .ivu-tabs-bar{
		display: flex;
		justify-content: center;
	}
	>>> .ivu-tabs-ink-bar{
		height: 3px!important;
		background-color: red!important;
	}
	>>> .ivu-tabs-nav .ivu-tabs-tab-active{
		font-weight: bold;
		color: #000000;
	}
	/* .main-top{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 35px;
		width: 100%;
		padding: 0 20px;
		box-shadow: -1px 0 2px;
	}
	.main-tiem{
		position: relative;
		display: flex;
		width: 450px;
		height: 100%;
	}
	.main-tiem .item-div{
		display: flex;
		font-size: 13px;
		align-items: center;
		justify-content: center;
		width: 20%;
		cursor: pointer;
	}
	.main-tiem .item-div:nth-child(1):hover~.item-bott{
		left: 0%;
	}
	.main-tiem .item-div:nth-child(2):hover~.item-bott{
		left: 20%;
	}
	.main-tiem .item-div:nth-child(3):hover~.item-bott{
		left: 40%;
	}
	.main-tiem .item-div:nth-child(4):hover~.item-bott{
		left: 60%;
	}
	.main-tiem .item-div:nth-child(5):hover~.item-bott{
		left: 80%;
	}
	.item-bott{
		position: absolute;
		animation-fill-mode:forwards;
		transition: left 0.5s;
		transition-timing-function: ease-in-out;
		bottom: 0;
		left: 0;
		width: 20%;
		height: 3px;
		background-color: #FF0000;
	} */
</style>
